<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>figure 2</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<script src="js/prototype.js" type="text/javascript"></script>
	<script src="js/scriptaculous.js" type="text/javascript"></script>
	<style type="text/css">
	
		table {
			border-collapse: collapse;
		}
		
		td.outer {
			border: 2px solid black;
		}
		
		td.inner {
			border: 1px dotted #aaa;
			width: 50px;
			height: 50px;
		}
		
		table.finished td {
			background-color: #aaa !important;
		}
	
	</style>
	<script type="text/javascript">
		
		var objsToDo = ["morph1", "morph2", "morph3", "morph4", "morph5", "morph6", "morph7", "morph8"];
		var rowTimes = [0.3, 0.3, 2.2, 0.6, 0.9, 1.1, 1.3, 1.1];
		var currObject = 0;
		var numThreads = 3;
		var threadColours = ["#afa", "#faa", "#ffa", "#aff"];
		
		function fillNext(obj, col, dur) {

			// get the next object to change.
			changeObject = obj.down("td.notdone");
			if (!changeObject) {
			
				obj.addClassName("finished");
			
				// run "done" program.
				if (currObject < objsToDo.length) {
					fillNext(
						$(objsToDo[currObject]),
						col,
						rowTimes[currObject]
					);					
					currObject++;
				}
				
				// all done in here.
				return;
			
			}
			
			// Morph it.
			new Effect.Morph(changeObject, {
				style:'background:' + col,
				duration: dur
			});
			
			// Set another one to morph, soon.
			window.setTimeout(function() {
				obj.down("td.notdone").removeClassName("notdone");
				fillNext(obj, col, dur);
			}, dur * 1000);
			
		}
		
		function crazy() {

			while (currObject < numThreads) {
				fillNext(
					$(objsToDo[currObject]),
					threadColours[currObject],
					rowTimes[currObject]
				);
				currObject++;
			}
					
		}
		
	</script>
</head>
<body>


	<table>

		<tr>
			<td class="outer">
				
				<table id="morph1">
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>										
				</table>
				
			</td>
			<td class="outer">
				
				<table id="morph2">
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>										
				</table>
				
			</td>
			<td class="outer">
				
				<table id="morph3">
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>										
				</table>
				
			</td>
			<td class="outer">
				
				<table id="morph4">
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>										
				</table>
				
			</td>
			<td class="outer">
				
				<table id="morph5">
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>										
				</table>
				
			</td>
			<td class="outer">
				
				<table id="morph6">
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>										
				</table>
				
			</td>
			<td class="outer">
				
				<table id="morph7">
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>										
				</table>
				
			</td>
			<td class="outer">
				
				<table id="morph8">
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>
					<tr>
						<td class="inner notdone"/>
					</tr>										
				</table>
				
			</td>																								
		</tr>

	</table>

	<input type="button" id="myButton" value="Start Simulation" onclick="crazy();" />


</body>
</html>

